<template>
    <div>
        <el-form status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="账号" prop="name">
            <el-input v-model="name" @blur="checkUser"></el-input>
        </el-form-item>        
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
            <el-input v-model="mobile"></el-input>
        <el-row>
            <el-button type="primary" plain @click="sms">发送短信验证码</el-button>
        </el-row>
        </el-form-item>
        <el-form-item label="验证码" prop="sms_code">
            <el-input v-model="sms_code" @blur="phoneVerify"></el-input>
        </el-form-item>        
        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
        </el-form>

    </div>
</template>

<script>
import {v4 as uuid4} from "uuid"
import {post} from "../../utils/request"
export default {
    data(){
        return{
            name:'',
            pass:'',
            mobile:'',
            sms_code:'',
            uuid:'',
            rules:{
                // name: [
                //     { required: true, message: '请输入用户名', trigger: 'blur' },
                //     { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                // ],
                // pass: [
                //     { required: true, message: '请输入密码', trigger: 'blur' },
                //     { min: 3, max: 10, message: '密码是由字母开头', trigger: 'blur' }
                // ],
                // mobile: [
                //     { required: true, message: '请输入正确的手机号', trigger: 'blur' },
                //     { min: 11, message: '请输入手机号', trigger: 'blur' }
                // ],
            }
        }
    },
    methods:{
        // 发送短信验证码
        sms(){
            post("users/sms_code/", {mobile:this.mobile,uuid:this.uuid})
            .then((res) => {
                if(res.data.code == 200){
                    console.log("获取成功", res)  
                    alert(res.data.msg)  
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        // 检验短信验证码
        phoneVerify(){
            let form_data = new FormData()
            // 添加数据
            form_data.append('sms_code', this.sms_code)
            form_data.append('uuid', this.uuid)
            // 发送请求
            post("users/phone_verify/",{uuid:this.uuid, sms_code:this.sms_code})
            .then(res => {
                console.log(res.data)
            }).catch(err=>{
                console.log(err)
            })
        },
        // 验证用户是否存在
        checkUser(){
            post("users/check_user/", {username: this.name})
            .then((res) => {
                if(res.data.code == 200){
                    console.log("该用户存在", res)
                }else{
                    console.log("该用户未注册", res)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        // 登录
        login(){
            post("users/login/",{username:this.name, password:this.pass})
            .then((res) => {
                console.log(res)
            }).catch((err) => {
                console.log(err)
            });
        }
    },
    mounted(){
        this.uuid = uuid4()
    },

}
</script>

<style>

</style>